import GroupInfo from './detail/GroupInfo';
import GroupProducts from './detail/GroupProducts';
import GroupShops from './detail/GroupShops';
import { useState,useEffect } from 'react';
// 导入获取团购详情的接口
import {getGroupBuy} from '../../../api/channel';
// 导入路由的钩子
import { useParams } from 'react-router-dom';
// 导入类型
import type {GroupInfoType} from '../../../types/index'
// 导入antd的类型
import type {TablePaginationConfig} from 'antd/lib/table'
// 导入antd的组件tabs
import { Tabs } from 'antd';
// 导入antd的类型
import type { TabsProps } from 'antd';
function GroupBuyDetail() {
  // 定义groupInfo
  //拿到id 
  const {id} = useParams();
  // 定义groupInfo
  const [groupInfo,setGroupInfo] = useState<GroupInfoType>({});
  // 挂载完毕后获取数据
  useEffect(() => {
     getGroupBuy({id}).then(res=>{
      if(res.data.code===0){
        // 更新数据
        setGroupInfo(res.data.data[0])
      }
     })
  }, []);
  const onChange = (key: string) => {
    console.log(key);
  };
  // 定义tabs的数据
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: `团购信息`,
      children: <GroupInfo groupInfo={groupInfo}/>,
    },
    {
      key: '2',
      label: `团购商品`,
      children: <GroupProducts groupInfo={groupInfo}/>,
    },
    {
      key: '3',
      label: `团购门店`,
      children:<GroupShops/>,
    },
  ];
  return ( <div>
   <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;
    </div> );
}

export default GroupBuyDetail;